<template>
  <div class="unit-boxs">
    <!-- <div class="tbas-box" :class="{ 'tabs-box-2': cruuent == 2 }">
      <div class="tabs-parent">
        <t-tabs v-model="cruuent" v-if="props.infoId !== 0" @change="change">
          <t-tab-panel :value="item.value" :label="item.title" v-for="item in tabList" :key="item.value"> </t-tab-panel>
        </t-tabs>
      </div>
    
    </div> -->

    <div class="unit-boxs-body" id="unit-boxs-body-byId">
      <div class="tab-title">单元基础信息</div>
      <unitItem1
        ref="componetsItems"
        :info="parmas"
        @saveGroup="saveGroup"
        @setInfo="setInfo"
        v-if="cruuent == 1"
        @oepnAI="emit('openAIshow')"
      />
      <t-button class="save-unit-btn" @click="save" :loading="loading">保存单元基础信息</t-button>
      <div class="tab-title-box">
        <div class="tab-title2 tab-title">单元展品</div>
        <span>（单元展品能够跟单元辅助信息进行关联，形成小组的展示的概念）</span>
      </div>
      <unitItem2 ref="componetsItems1" :ids="props.infoId" @setInfo="setInfo" />
    </div>
    <!-- <div class="hw-flex-style-c-c" v-show="cruuent == 1">
      <t-button v-if="props.infoId !== 0" @click="stepCruuent">保存并关联展品</t-button>
    </div> -->
    <messageModel
      submitText="保存"
      title="提示"
      :visible="visibleMessage1"
      problem="当前信息未保存"
      message="是否保存当前单元信息？"
      @closeClick="closeClick"
      @submitClick="pathSubmitClick"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import messageModel from '@/components/messageModel/index.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import unitItem1 from './unitItem1.vue';
import unitItem2 from './unitItem2.vue';
import { tabList, tabListNull } from './data';
import { disableSort, moduleDelete, moduleSave, moduleList, moduleInfo } from '@/api/desgin/desgin';
import { ref, reactive, computed, watch, nextTick } from 'vue';
import { useProjectStore } from '@/store';
import { isURL } from '@/utils/minxin';

const store = useProjectStore();
const lodId = ref(0);
const emit = defineEmits(['setGroup', 'openAIshow']);
const props = defineProps({
  id: {
    type: Number,
  },
  parentId: {
    type: Number,
  },
  infoId: {
    type: Number,
  },
});
const componetsItems = ref(null);
const componetsItems1 = ref(null);
const visibleMessage1 = ref(false);
const loading = ref(false);
const cruuent = ref(1);
const parmas = {
  id: 0,
  name: '',
  subTitle: '',
  description: '',
  coverUrl: '',
  digitalShowroom: '',
  parentId: 0,
  data: [],
  // {
  //   "id": 0,
  //   "url": "string",
  //   "size": 0,
  //   "name": "string",
  //   "type": 0,
  //   "status": 0
  // }
};
const closeClick = () => {
  init();
  visibleMessage1.value = false;
};
const pathSubmitClick = async () => {
  parmas.id = props.infoId;
  // parmas.parentId = store.parentId;
  parmas.coverUrl = String(parmas.coverUrl);
  loading.value = true;
  let res = await moduleSave(localStorage.getItem('projectId'), parmas);
  init();
  visibleMessage1.value = false;
};
const change = () => {
  if (cruuent.value === 1) {
    nextTick(() => {
      componetsItems.value.setDatas(parmas);
      const scrollBox = document.getElementById('unit-boxs-body-byId');
      scrollBox.scrollTop = 1;
    });
  }
};
watch(
  () => props.infoId,
  (newVal, oldVal) => {
    // if (props.infoId !== 0 && store.planChildType === true) {
    //   lodId.value = oldVal;
    //   visibleMessage1.value = true;
    //   return;
    // }
    if (props.infoId === 0) {
      cruuent.value = 1;
      parmas.name = '';
      parmas.description = '';
      parmas.coverUrl = '';
      parmas.data = [];
      parmas.subTitle = '';
      parmas.digitalShowroom = '';
      componetsItems.value.setDatas(parmas);
    } else {
      lodId.value = oldVal;
      // parmas.parentId = store.parentId;
      // pathSubmitClick();

      init();
    }
    nextTick(() => {
      const scrollBox = document.getElementById('unit-boxs-body-byId');
      scrollBox.scrollTop = 1;
    });
    // let unit-boxs-body-byId
    // console.log(changKey.value);
  },
  { deep: true },
);

const componetsItem = computed(() => {
  switch (cruuent.value) {
    case 1:
      return unitItem1;
      break;
    default:
      return unitItem2;
      break;
  }
});
const init = async () => {
  try {
    let res = await moduleInfo(props.infoId);

    // parmas = res.data;

    parmas.id = res.data.id;
    parmas.name = res.data.name;
    parmas.description = res.data.description;
    parmas.coverUrl = res.data.coverUrl;
    parmas.parentI = res.data.parentI;
    parmas.data = res.data.data;
    parmas.subTitle = res.data.subTitle;
    parmas.digitalShowroom = res.data.digitalShowroom;
    parmas.audio = res.data.audio;
    componetsItems.value.setDatas(parmas);
    // console.log(parmas);
  } catch {}
};
const saveGroup = () => {
  save();
};
const setInfo = (e) => {
  parmas.name = e.name;
  parmas.description = e.description;
  parmas.coverUrl = e.coverUrl;
  parmas.data = e.data;
  parmas.subTitle = e.subTitle;
  parmas.digitalShowroom = e.digitalShowroom;
  parmas.audio = e.audio;
};
const stepCruuent = () => {
  save();
  cruuent.value = 2;
};

const save = async () => {
  try {
    if (loading.value) {
      return;
    }
    if (!parmas.name) {
      MessagePlugin.error('请填写单元名称');
      return;
    }
    if (parmas.name.length < 2) {
      MessagePlugin.error('单元名称至少需要两个字');
      return;
    }
    if (parmas.digitalShowroom) {
      let urlType = isURL(parmas.digitalShowroom);
      if (!urlType) {
        MessagePlugin.error('请填写正确全景链接');
        return;
      }
    }
    //  if ( parmas.digitalShowroom < 2) {
    //   MessagePlugin.error('单元名称至少需要两个字');
    //   return;
    // }
    parmas.id = props.infoId;
    parmas.parentId = props.parentId;
    parmas.coverUrl = String(parmas.coverUrl);
    parmas.video = null;
    parmas.data = [];
    loading.value = true;
    console.log(parmas);
    let res = await moduleSave(localStorage.getItem('projectId'), parmas);
    if (res.statusCode == 200) {
      MessagePlugin.success('保存成功');

      emit('setGroup');
      loading.value = false;
    }
  } catch {
    loading.value = false;
  }
};
if (props.infoId !== 0) {
  init();
}
</script>

<style lang="less" scoped>
.tbas-box {
  display: flex;
  width: calc(100% - 48px);
  height: 48px;
  margin: 0 auto;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  padding: 0 0px;
}
:deep(.t-tabs__nav-item.t-size-m) {
  height: 47px;
}
:deep(.t-tabs__nav-item-text-wrapper) {
  height: 47px;
}
.tabs-box-2 {
  padding: 0 0px;
  width: calc(100% - 48px);
}
.unit-boxs {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.conetnts {
  display: flex;
  // box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
  width: 100%;
  // overflow: hidden;
}
.unit-boxs-body {
  position: relative;
  z-index: 100;
  flex: 1;
  overflow: scroll;
}
.unit-boxs-body::-webkit-scrollbar {
  display: none;
}
.hw-flex-style-c-c {
  margin-top: 32px;
  margin-bottom: 32px;
}
:deep(.t-card__header) {
  padding-left: 0;
}
.save-unit-btn {
  margin-top: 50px;
  margin-left: 24px;
}
.tab-title {
  width: 96px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e62b17;
  color: #e62b17;
  font-family: 'PingFang SC';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin-left: 24px;
  margin-top: 12px;
}
.tab-title2 {
  width: 64px;
  margin-top: 96px;
  margin-top: 0;
}
.tab-title-box {
  display: flex;
  margin-top: 94px;
  color: rgba(0, 0, 0, 0.38);
  font-family: 'PingFang SC';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
</style>
